<template>
    <div>
        <VHeader title="我要点单"/>
        <div class="body">
            <div class="title">{{info.title}}</div>
            <div>
                <img :src="info.thumbImage" width="100%"/>
            </div>
            <div class="flex cell">
                <div class="muted">所属区域：</div>
                <div>
                    <span v-for="(item, i) in $route.query.selectedName" :key="item">
                        {{item}}
                        <span v-if="i < $route.query.selectedName.length - 1"> &gt; </span>
                    </span>
                </div>
            </div>
            <div class="flex cell">
                <div class="muted">服务机构：</div>
                <div>{{info.organization}}</div>
            </div>
            <div class="flex cell">
                <div class="muted">服务方式：</div>
                <div>{{info.type}}</div>
            </div>
            <div class="flex cell">
                <div class="muted">联 系 人：</div>
                <div>{{info.contactName}}</div>
            </div>
            <div class="flex cell">
                <div class="muted">联系电话：</div>
                <div style="color:#F65D5D">{{info.contactMobile}}</div>
            </div>
            <div class="flex cell">
                <div class="muted">联系地址：</div>
                <div>{{info.workPlace}}</div>
            </div>
            <div class="flex flex-space-around buttons">
                <a :href="'tel:'+info.contactMobile"><button class="call">给Ta打电话</button></a>
                <router-link :to="{path: '/myOrder/form', query: {...$route.query, id: info.diandanId}}"><button class="order">我要点单此业务</button></router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                info: {},
            }
        },
        methods: {
            async getInfo() {
                this.page++
                try {
                    let list = await this.$http({
                        method: 'api.diandan.getDetail',
                        id: this.$route.query.id,
                    })
                    this.info = list.data.info
                } catch (e) {
                
                }
            },
            detail(id) {
                this.$router.push({path: '/myOrder/form', query: {id}})
            }
        },
        async mounted() {
            await this.getInfo()
        }
    }
</script>

<style lang="scss" scoped>
    .body {
        padding:0 0.2rem 2rem;
    }
    
    .title {
        padding: 0.3rem 0;
        line-height: 130%;
        font-size: 150%;
        text-align: center;
        border-bottom: 1px solid #CBCACA;
        margin-bottom: 0.2rem;
    }
    
    .cell {
        padding: 0.3rem 0;
        border-bottom: 1px solid #CCC;
        .muted {
            color: #888888;
        }
    }
    .buttons {
        margin-top: 20px;
        button {
            border:0;
            padding: 0.2rem;
            font-size: 130%;
            color: white;
            border-radius: 4px;
        }
        .call {
            background-color: #FFA518;
        }
        .order {
            background-color: #378EEF;
        }
    }
</style>